<template>
	<view class="my-box">
		<my-status></my-status>
		<my-icon></my-icon>
		<image mode="aspectFill" class="img" src="/static/my-img/背景.png" alt="" />
		<view class="menu" :style="scrollHeight">
      <image :src="user.img" />
			<text class="txt">{{user.userName}}</text>
			<text class="txt1" @click="info">信息管理</text>
			<text class="txt1" @click="address">地址管理</text>
			<text class="txt1" @click="use">使用条款</text>
			<text class="txt1" @click="contact">联系客服</text>
			
		</view>
		<view class="contact">
			
			
		</view>
	</view>
</template>

<script>
  import {mapState} from "vuex"
	export default {
    computed:{
      ...mapState("user",["user"])
    },
		data() {
			return {
					scrollHeight:"",
			};
			},
			onLoad() {
			uni.getSystemInfo({
			  success: res=> {
			    // const windowWidth = res.windowWidth;   
				// 窗口宽度
			    const windowHeight = res.windowHeight * 0.3   +"px"; 
				// 窗口高度
				const windowWidth = res.windowWidth * 0.37   +"px";
			    // console.log(windowWidth);
				this.scrollHeight =  "top:" + windowHeight+";"+"left:"+windowWidth
			    // console.log(windowHeight);
			  }
			});
			},
			methods:{
				info(event){
					console.log(1)
					uni.navigateTo({
						url:'/my/my-info/my-info'
					})
				},
				address(event){
					console.log(2)
					uni.navigateTo({
						url:'/my/my-address/my-address'
					})
				},
				use(event){
					console.log(3)
					uni.navigateTo({
						url:'/my/my-use/my-use'
					})
				},
				contact(){
					// 底部弹窗
					uni.showActionSheet({
						itemList:['4007001399','呼叫'],
						success: (res) => {
							console.log('选择了第'+ (res.tapIndex+1) +'个选项')
						},
						fail: (err) => {
							console.log('弹窗取消')
							
						}
					})
				}
				
				
			}
	}
</script>

<style lang="scss" scoped>
	.my-box {
		height: 100%;
		width: 100%;
		position: relative;
    // display: flex;
		.img {
			height: 100%;
			width: 100%;
		}

		.menu {
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
      image{
        height: 100rpx;
        width: 100rpx;
        border-radius: 100rpx;
      }
			.txt {
				letter-spacing: 5rpx;
				font-weight: 300;
				font-size: 20px;
				margin-bottom: 200rpx;
			}

			.txt1 {
				letter-spacing: 5rpx;
				font-weight: 300;
				font-size: 20px;
				margin-bottom: 100rpx;
			}
		}
	}
</style>